<template>
    <div>
		<!-- 顶部滑动 -->
		<div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item', item.sid == 0 ? 'mui-active':'']" v-for="(item,index) in cates" :key = "index" :id=item.sid @click="getPhoto(item.sid)">
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
		<!-- 图片区域 -->
		<ul>
			<li v-for="(item,index) in photo" :key="index">
				<img :src="item" alt="">
			</li>
		</ul>
    </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
	data() {
		return {
			cates:[],
			photo:[]
		}
	},
	created(){
		this.getPhotoList();
		this.getPhoto(0);
	},
    mounted() {
        mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
	},
	methods: {
		getPhotoList(){
			this.axios({
				url:"http://10.31.162.198/1810-3/Vue/vue-cms/src/lib/PHP/photolist.php"
			}).then(res=>{
				 this.cates=res.data;
				//  console.log(this)
				//  console.log(this.cates)
			})
		},
		getPhoto(cateId){
			this.axios(
				"http://10.31.162.198/1810-3/Vue/vue-cms/src/lib/PHP/photo.php/?sid="+cateId,
				{sid:cateId}
			).then(res=>{
				 this.photo=JSON.parse(res.data.url);
				//  console.log(res.data.url)
				//  console.log(JSON.parse(res.data.url))
			})
		}
	},
}
</script>

<style lang="scss" scoped>
*{
    touch-action: pan-y;
	margin: 0;
	padding: 0;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
    color:chocolate;
}
li{
	list-style: none;
	img{
		width: 100%;
	}
}

</style>
